<template>
	<el-card shadow="hover">
		<el-row :gutter="10" class="top-block mb8">
			<el-col :span="1.5">
				<el-button @click="onAddBanner" type="primary" plain icon="el-icon-plus">添加轮播图</el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="ID" align="center" prop="id" />
			<el-table-column label="轮播图标题" align="center" prop="title" />
			<el-table-column label="轮播图" align="center" prop="thumb">
				<template #default="scope">
					<el-image :src="scope.row.thumb" fit="scale-down" style="width: 60px; height: 60px" />
				</template>
			</el-table-column>
			<el-table-column label="状态" align="center" prop="status">
				<template #default="scope">
					{{ scope.row.status == 1 ? '启用' : '禁用' }}
				</template>
			</el-table-column>
			<el-table-column :formatter="formatTime" label="创建时间" align="center" prop="create_time" />
			<el-table-column label="操作" align="center" fixed="right">
				<template #default="{ row }">
					<el-button @click="onEditBanner(row)" type="text">修改</el-button>
					<el-button @click="onDeleteBanner(row)" type="text" style="color: #f56c6c">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<banner-add-dialog ref="bannerAddRef" />
		<banner-edit-dialog ref="bannerEditRef" />
	</el-card>
</template>

<script lang="ts">
import { reactive, ref, toRefs, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { timeDictionary } from '/@/utils/dictionaryTranslation';
import BannerAddDialog from './dialog/BannerAddDialog.vue';
import { bannerList, bannerDelete } from '/@/api/admin/index';
import BannerEditDialog from './dialog/BannerEditDialog.vue';
export default {
	name: 'systemBanner',
	components: { BannerAddDialog, BannerEditDialog },
	setup() {
		const bannerAddRef = ref(null);
		const bannerEditRef = ref(null);
		const state = reactive({
			queryParams: {
				pageNum: 1,
				pageSize: 10,
			},
			showSearch: true,
			tableList: [],
			loading: false,
			total: 0,
		});
		//生命周期
		onMounted(() => {
			getList();
		});
		/********** 点击事件(on开头) **********/
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 添加轮播图
		const onAddBanner = () => {
			(bannerAddRef.value as any)?.openDialog({}, () => getList());
		};
		//修改轮播图
		const onEditBanner = (row: any) => {
			(bannerEditRef.value as any)?.openDialog({ data: { banner_id: row.id } }, () => getList());
		};
		//删除轮播图
		const onDeleteBanner = (row: any) => {
			ElMessageBox.confirm('您确定要删除这张轮播图?', '确认消息', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					_bannerDelete({ banner_id: row.id });
				})
				.catch(() => {});
		};

		/********** 方法事件 **********/
		const getList = () => {
			state.loading = true;
			_bannerList(state.queryParams);
		};
		// 录入时间字典
		const formatTime = (row: any) => {
			return timeDictionary(row.create_time);
		};

		/***********************网络请求************************/
		//列表
		const _bannerList = (params: any) => {
			bannerList(params)
				.then((res: any) => {
					console.log(res);
					state.tableList = res.data.list;
					state.total = res.data.info.total;
					state.loading = false;
				})
				.catch((err) => {
					state.loading = false;
					console.log(err);
				});
		};
		//删除
		const _bannerDelete = (params: any) => {
			bannerDelete(params)
				.then((res: any) => {
					console.log(res);
					ElMessage.success('操作成功');
					getList();
				})
				.catch((err) => {
					console.log(err);
				});
		};
		return {
			bannerAddRef,
			bannerEditRef,
			onQuery,
			onAddBanner,
			onEditBanner,
			onDeleteBanner,
			getList,
			formatTime,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
